import React from 'react';
import Styles from './sides/styles';
import Database from './sides/database';
import Hooks from '../common/hooks';

class Sidebar extends React.Component {
    constructor(props){
        super(props);
        this.state={
			styles:{
				'font-weight':''
				,'font-style':''
				,'text-decoration':''
				,'text-align':''
				,'color':''
				,'background-color':''
			},
			dbopts:{
				type:'',
				field:'',
				comment:'',
				value:''
			},
			fields:[]
		};

        if(props.control!=undefined){
            this.initControl(props.control);
        }
		this.callback=this.callback.bind(this);
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('change',function(data){
            let params=data.params;
            if(params!=undefined){
                that.setState(params.state);
            }
        });
    }
    render(){
        return (
			<div className="opts-sidebar tab-box">
				<div className="opts-tabs">
					<span className="opts-tabs-item tab-nav active">
					单元格
					</span><span className="opts-tabs-item tab-nav">
					数据模型
					</span>
				</div>
				<div className="opts-warp tab-item active">
					<div className="opts-scroll-warp">
						<Styles state={this.state.styles} callback={this.callback}/>
					</div>
				</div>
				<div className="opts-warp tab-item">
					<div className="opts-scroll-warp">
						<Database fields={this.state.fields} state={this.state.dbopts} callback={this.callback}/>
					</div>
				</div>
			</div>
        );
    }
	callback(type,data){
		let state=this.state[type];
		for(let i in data){
			state[i]=data[i];
		}
		this.setState(state);
		if(typeof this.control.dispatch==='function'){
			this.control.dispatch('callback',{type:type,data:state});
		}
	}
}

export default Sidebar;